<template>
	<view class="t-enroll-wrap">
		<view class="enroll-head">
			<view class="enroll-head-title">报名登记</view>
			<view class="enroll-head-tip">请输入个人基本信息及联系方式</view>
		</view>
		<view class="enroll-form">
			<view class="enroll-form-item">
				<view class="enroll-form-item-label"><text style="color: red;">*</text>姓名</view>
				<input class="enroll-form-item-input" v-model="formData.userName" :maxlength="20" placeholder-style="color: #999999;font-size: 28rpx;" type="text" placeholder="请输入姓名" />
			</view>
			<view class="enroll-form-item">
				<view class="enroll-form-item-label"><text style="color: red;">*</text>手机号</view>
				<input class="enroll-form-item-input" v-model="formData.userPhone" type="number" :maxlength="11" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入手机号" />
			</view>
			<view class="enroll-form-item">
				<view class="enroll-form-item-label"><text style="color: red;">*</text>性别</view>
				<view style="margin-top: 20rpx;">
					<radio-group @change="handleSexChange">
						<label><radio :value="0" :checked="formData.userSex == 0" />女</label>
						<label style="margin-left: 10rpx;"><radio :value="1" :checked="formData.userSex == 1" />男</label>
					</radio-group>
				</view>
			</view>
			<view class="enroll-form-item">
				<view class="enroll-form-item-label">生日</view>
				<picker mode="date" :value="formData.userBirthday" :end="endDate" @change="bindDateChange">
					<input v-model="formData.userBirthday" class="enroll-form-item-input" type="text" disabled :maxlength="11" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请选择生日" />
				</picker>
				
			</view>
			<view class="enroll-form-item" style="margin: 40rpx 0 0 0;">
				<button @click="submitEnroll" type="primary">确认报名</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {parseTime} from '../../static/js/tancireUtils.js'
	
	export default {
		data() {
			return {
				formData: {
					userName: '',
					userPhone: '',
					userSex: 0,
					userBirthday: '',
				},
			};
		},
		computed: {
			endDate() {
				const cDate = new Date();
				return parseTime(cDate, '{y}-{m}-{d}');
			}
		},
		onLoad(options) {
			this.formData.workId = options.id;
		},
		methods: {
			handleSexChange(event) {
				if (event.detail) {
					this.formData.sex = event.detail.value;
				}
			},
			bindDateChange(event) {
				if (event.detail) {
					this.formData.userBirthday = event.detail.value;
				}
			},
			submitEnroll() {
				// 确认报名
				if (!this.formData.userName) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.userPhone) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return;
				}
				this.$http.post({
					url: this.$apis.enrollWork,
					data: this.formData,
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '报名成功',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log('调用接口失败：', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	.t-enroll-wrap {
		background-color: #f1f1f1;
		height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
		overflow-y: auto;
		
		.enroll-head {
			background-color: #ffffff;
			padding: 30rpx;
			border-radius: 20rpx;
			
			&-title {
				font-size: 32rpx;
				color: #333333;
				font-weight: 600;
			}
			
			&-tip {
				margin-top: 8rpx;
				font-size: 28rpx;
				color: #999999;
			}
		}
		
		.enroll-form {
			background-color: #ffffff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;
			
			&-item {
				margin-bottom: 20rpx;
				
				&-label {
					font-size: 28rpx;
					color: #666666;
				}
				
				&-input {
					border: 1px solid #d7d7d7;
					padding: 20rpx;
					margin-top: 20rpx;
					font-size: 32rpx;
					border-radius: 20rpx;
					color: #333333;
					
				}
				
			}
			
		}
	}
</style>